<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="./css/index.css">
</head>

<body>
	<main>
		<audio src="./Audio/bgm.mp3" id="myaudio" controls="controls" loop="true" hidden="true"></audio>
		<div id="start">
			<div id="meat">
				<img src="./img/自转动图/zhengqi.gif" alt="">
				<h2 id="waiting">LOADING·</h2>
				<div id="loading">
					<p align='center' id="percent">0%</p>
				</div>
			</div>
		</div>

		<div id="first">
			<img class="music-icon" onclick="closePlay()" src="./img/img/disc.png" alt="">
			<div id="outer"></div>



			<div id="first-wenan">
				<h1>|聊美食</h1>
				<h1>&nbsp;我是专业的</h1>
			</div>
			<div class="logo">
				<img src="./img/img/rou1.png" width="100%" height="80%" alt="">
				<h5>一碗东坡肉</h5>
			</div>
			<div id="ci-1">
				<div id="rou1">
				</div>
				<div id="rou2">

				</div>
				<div id="rou3">

				</div>
				<div id="rou4">

				</div>

				<div id="rou5">

				</div>
				<div id="ci-2">
					<!-- 放置食品的环 -->

					<div id="ci-3">

						<div id="rightRou">
							<img src="./img/img/rou1.png" width="100%" height="100%" alt="">
						</div>
					</div>
				</div>

				<div id="nextPage">
					<h5>了解做法</h5>
					<img src="./img/img/arrow.png" width="25%" height="30%" alt="">
				</div>
			</div>
		</div>

		</div>

		<div id="second">
			<div class="logo">
				<img src="./img/img/rou1.png" width="100%" height="80%" alt="">
				<h5>一碗东坡肉</h5>
			</div>
			<img onclick="closePlay()" class="music-icon" src="./img/img/disc.png" alt="">

			<!-- 食材背景部分 -->
			<div id="food-bg">
				<img id="bg-food" src="./img/img/rou4.png" width="100%" height="100%" alt="">
			</div>

			<!-- 文案部分 -->
			<div id="WA">
				<p>猪肉焯水，</p>
				<p>切成大小适宜的方块。</p>


			</div>
			<!-- 提示语部分 -->
			<div id="tip">
				<p>肥瘦适当、层层肥瘦相间，比例接近。</p>
				<p style="float: right;">——五花肉挑选经验</p>
			</div>
			<!-- 食材选择 -->
			<div id="food-choose">
				<div class="food food1">
					<img src="./img/img/zhurou2.png" alt="">
				</div>
				<div class="food food2" style="margin-left:4%;">
					<img src="./img/img/congjiang2.png" alt="">
				</div>
				<div class="food food2" style="margin-left: 4%;">
					<img src="./img/img/bingtang2.png" alt="">
				</div>
			</div>

			<!-- 下一页图标 -->
			<img class="next" src="./img/img/arrow.png" alt="">
		</div>

		<div id="third">
			<img onclick="closePlay()" class="music-icon" src="./img/img/disc.png" alt="">
			<img id="zhurousong" src="./img/img/zi5.png" alt="">

			<img id="zhuobu" src="./img/img/zhuobu.png" alt="">
			<img id="last-rou" src="./img/自转动图/zhengqi.gif" alt="">
		</div>
	</main>


	<script src="./js/huadong.js"></script>
	<script src="./js/tab.js"></script>
	<script src="./js/musicControl.js"></script>
	<script src="./js/index.js"></script>

</html>